<template>
	<view class="tui-list-view tui-view-class" :style="{ backgroundColor: backgroundColor, marginTop: marginTop }">
		<view class="tui-list-title" :style="{ color: color, fontSize: size + 'rpx', lineHeight: 30 + 'rpx' }" v-if="title">{{ title }}</view>
		<view class="tui-list-content" :class="[unlined ? 'tui-border-' + unlined : '']"><slot></slot></view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

const emit = defineEmits([])

const props = defineProps({
	title: {
		type: String,
		default: ''
	},
	color: {
		type: String,
		default: '#666'
	},
	//rpx
	size: {
		type: Number,
		default: 30
	},
	backgroundColor: {
		type: String,
		default: 'transparent'
	},
	unlined: {
		type: String,
		default: '' //top,bottom,all
	},
	marginTop: {
		type: String,
		default: '0'
	}
})
</script>

<style lang="scss" scoped>
.tui-list-title {
	width: 100%;
	padding: 30rpx;
	box-sizing: border-box;
}

.tui-list-content {
	width: 100%;
	position: relative;
}

.tui-list-content::before {
	content: ' ';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	border-top: 1px solid #eaeef1;
	-webkit-transform: scaleY(0.5) translateZ(0);
	transform: scaleY(0.5) translateZ(0);
	transform-origin: 0 0;
	z-index: 2;
	pointer-events: none;
}

.tui-list-content::after {
	content: '';
	width: 100%;
	position: absolute;
	border-bottom: 1px solid #eaeef1;
	-webkit-transform: scaleY(0.5) translateZ(0);
	transform: scaleY(0.5) translateZ(0);
	transform-origin: 0 100%;
	bottom: 0;
	right: 0;
	left: 0;
}

.tui-border-top::before {
	border-top: 0;
}

.tui-border-bottom::after {
	border-bottom: 0;
}

.tui-border-all::after {
	border-bottom: 0;
}

.tui-border-all::before {
	border-top: 0;
}
</style>
